<template>
  <div class="privacy-policy-container">
    <van-nav-bar
      title="隐私政策"
      left-arrow
      @click-left="router.back()"
      :border="false"
      class="custom-nav"
    />
    <div class="content">
      <div class="header">
        <div class="app-title">
          <h1>新学校</h1>
        </div>
        <h2>隐私政策</h2>
        <p class="update-time">更新时间：2024年1月1日</p>
      </div>
      <div class="policy-content">
        <div class="intro">
          <van-icon name="shield-o" size="48" class="shield-icon" />
          <p>我们重视您的隐私！</p>
          <p class="sub-text">我们采取严格的措施保护您的个人信息安全</p>
        </div>
        <section>
          <div class="section-header">
            <van-icon name="records" size="20" />
            <h3>1. 信息收集</h3>
          </div>
          <p>我们收集的信息类型包括您提供给我们的信息以及我们在您使用服务时自动收集的信息。</p>
          <div class="info-grid">
            <div class="info-item">
              <van-icon name="contact" size="24" />
              <span>基本信息</span>
            </div>
            <div class="info-item">
              <van-icon name="phone-o" size="24" />
              <span>联系方式</span>
            </div>
            <div class="info-item">
              <van-icon name="location-o" size="24" />
              <span>位置信息</span>
            </div>
            <div class="info-item">
              <van-icon name="clock-o" size="24" />
              <span>使用记录</span>
            </div>
          </div>
        </section>
        <section>
          <div class="section-header">
            <van-icon name="guide-o" size="20" />
            <h3>2. 信息使用</h3>
          </div>
          <p>我们使用收集的信息来提供、维护和改进我们的服务，并开发新的服务。</p>
          <div class="usage-list">
            <div class="usage-item">
              <van-icon name="service-o" />
              <span>提供服务</span>
            </div>
            <div class="usage-item">
              <van-icon name="setting-o" />
              <span>系统维护</span>
            </div>
            <div class="usage-item">
              <van-icon name="upgrade" />
              <span>功能优化</span>
            </div>
          </div>
        </section>
        <section>
          <div class="section-header">
            <van-icon name="friends-o" size="20" />
            <h3>3. 信息共享</h3>
          </div>
          <p>我们不会出售您的个人信息。我们仅在必要时与服务提供商共享信息。</p>
          <div class="notice-box warning">
            <van-icon name="warning-o" />
            <div class="notice-content">
              <h4>重要提示</h4>
              <p>未经您的同意，我们不会向第三方分享您的个人信息。</p>
            </div>
          </div>
        </section>
        <section>
          <div class="section-header">
            <van-icon name="lock" size="20" />
            <h3>4. 信息安全</h3>
          </div>
          <p>我们采取适当的安全措施来保护您的个人信息免受未经授权的访问或披露。</p>
          <div class="security-features">
            <div class="feature">
              <van-icon name="encrypt" />
              <span>数据加密</span>
            </div>
            <div class="feature">
              <van-icon name="shield-o" />
              <span>访问控制</span>
            </div>
            <div class="feature">
              <van-icon name="eye-o" />
              <span>安全监控</span>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<style lang="scss" scoped>
.privacy-policy-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  
  .custom-nav {
    background: transparent;
    
    :deep(.van-nav-bar__title) {
      color: #333;
      font-weight: 600;
    }
    
    :deep(.van-icon) {
      color: #333;
    }
  }
  
  .content {
    padding: 16px;
    
    .header {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 32px;
      padding: 24px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
      
      .app-title {
        margin-bottom: 16px;
        
        h1 {
          font-size: 24px;
          font-weight: 600;
          color: #333;
        }
      }
      
      h2 {
        margin: 16px 0 8px;
        font-size: 24px;
        font-weight: 600;
        color: #333;
      }
      
      .update-time {
        font-size: 14px;
        color: #999;
      }
    }
    
    .policy-content {
      padding: 24px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
      
      .intro {
        text-align: center;
        margin-bottom: 40px;
        
        .shield-icon {
          color: var(--van-primary-color);
          margin-bottom: 16px;
        }
        
        p {
          margin: 8px 0;
          font-size: 18px;
          color: #333;
          font-weight: 500;
          
          &.sub-text {
            font-size: 14px;
            color: #666;
            font-weight: normal;
          }
        }
      }
      
      section {
        margin-bottom: 32px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .section-header {
          display: flex;
          align-items: center;
          margin-bottom: 16px;
          
          .van-icon {
            margin-right: 8px;
            color: var(--van-primary-color);
          }
          
          h3 {
            font-size: 18px;
            font-weight: 600;
            color: #333;
          }
        }
        
        p {
          line-height: 1.8;
          color: #666;
          margin-bottom: 16px;
        }
        
        .info-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
          margin-top: 20px;
          
          .info-item {
            display: flex;
            align-items: center;
            padding: 12px;
            background: var(--van-primary-color-light);
            border-radius: 8px;
            
            .van-icon {
              margin-right: 8px;
              color: var(--van-primary-color);
            }
            
            span {
              color: var(--van-primary-color-dark);
              font-size: 14px;
            }
          }
        }
        
        .usage-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
          margin-top: 16px;
          
          .usage-item {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            background: #f8f8f8;
            border-radius: 8px;
            
            .van-icon {
              margin-right: 12px;
              color: var(--van-primary-color);
            }
            
            span {
              color: #666;
            }
          }
        }
        
        .notice-box {
          display: flex;
          align-items: flex-start;
          padding: 16px;
          border-radius: 8px;
          margin-top: 16px;
          
          &.warning {
            background: #fff7e6;
            
            .van-icon {
              color: #f90;
            }
            
            .notice-content {
              h4 {
                color: #f90;
                margin: 0 0 4px;
                font-size: 16px;
              }
              
              p {
                margin: 0;
                color: #995c00;
                font-size: 14px;
              }
            }
          }
          
          .van-icon {
            margin-right: 12px;
            margin-top: 2px;
            font-size: 20px;
          }
        }
        
        .security-features {
          display: flex;
          justify-content: space-around;
          margin-top: 24px;
          
          .feature {
            display: flex;
            flex-direction: column;
            align-items: center;
            
            .van-icon {
              font-size: 32px;
              color: var(--van-primary-color);
              margin-bottom: 8px;
            }
            
            span {
              font-size: 14px;
              color: #666;
            }
          }
        }
      }
    }
  }
}
</style>
